<template>
    <div class="left-side">
      <a class="left-avatar" href="#">
        <img class="user-avatar" src="../assets/logo.png" alt="">
        <p class="user-nickname">凡人凡物</p>
      </a>
      <div class="left-list">
        <a class="left-sub" href="#">
          <i class="fa fa-comment-o" aria-hidden="true"></i>
          <p>意见反馈</p>
        </a>
        <a class="left-sub" href="#">
          <i class="fa fa-book" aria-hidden="true"></i>
          <p>使用条款</p>
        </a>
        <a class="left-sub" href="#">
          <i class="fa fa-lock" aria-hidden="true"></i>
          <p>隐私声明</p>
        </a>
        <a class="left-sub" href="#">
          <i class="fa fa-question-circle" aria-hidden="true"></i>
          <p>帮助</p>
        </a>
        <a class="left-sub" href="#">
          <i class="fa fa-cog" aria-hidden="true"></i>
          <p>应用设置</p>
        </a>
      </div>
      <a class="left-foot" href="#">版本：1.0.0</a>
    </div>
</template>

<script>
export default {
  name: 'leftSide',
  data () {
    return {
    }
  },
  props: ['isShow'],
  methods: {
    openLeftSide () {
      this.$emit('on-left-side', {})
    }
  },
  watch: {
    isShow (val) {
      let leftdiv = this.$el
      if (!val) {
        setTimeout(function () {
          leftdiv.style.zIndex = '-1'
        }, 280)
      } else {
        leftdiv.style.zIndex = '0'
      }
    }
  }
}
</script>

<style scoped>
.left-sub{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px;
  font-size: 19px;
  cursor: pointer;
}
.left-sub i{
  text-align: right;
  flex-basis: 30%;
  box-sizing: border-box;
}
.left-sub p{
  flex: auto;
  text-align: left;
  box-sizing: border-box;
  margin: 10px;
  margin-left: 22px;
}
.user-nickname{
  color: gray;
}
.user-avatar{
  width: 80px;
  height: 80px;
  background-color: lightgray;
  border-radius: 40px;
}
a.left-foot{
  height: 30px;
  color: gray;
}
.left-avatar{
  height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.left-list{
  display: flex;
  flex-direction: column;
  flex: auto;
}

.left-side{
  position: fixed;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 300px;
  background-color: #262e34;
  z-index: -1;
}
</style>
